import React from 'react'
import './swiper.less';
import { Image } from 'antd'
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/bundle';
import 'swiper/css/navigation';
import 'swiper/css/mousewheel'
import 'swiper/css/pagination';
import 'swiper/css/autoplay';
import 'swiper/css/zoom';
import SwiperCore, {
    Zoom, Navigation, Autoplay,
    Mousewheel, Pagination
} from 'swiper';

SwiperCore.use([Zoom, Navigation, Autoplay, Mousewheel, Pagination]);

const Swipers = (props) => {
    const { rotationImg } = props
    return (
        <div className='content'>
            <div className="contentmid">
                <Swiper
                    loop={true}
                    grabCursor={true}
                    pagination={{ clickable: true }}
                    speed={1000}
                    autoplay={{
                        delay: 2000,
                        disableOnInteraction: false
                    }}
                    autoHeight={true}
                    onSwiper={(swiper) =>{console.log('222');}}
                >
                    {
                        rotationImg.map((item, index) => {
                            return (
                                <SwiperSlide key={item.id}
                                    className="img_div">
                                    <a href={item.linkUrl}>
                                        <img className="rotationChart-img"
                                            src={item.picUrl} alt="" />
                                    </a>
                                    {/* <div className="mask"></div> */}
                                </SwiperSlide>
                            )
                        })
                    }


                    {/* <SwiperSlide>
                        <div className="">
                            <img src="http://p1.music.126.net/ZYLJ2oZn74yUz5x8NBGkVA==/109951164331219056.jpg" width="100%" height="100%" alt="推荐" />
                           
                            
                        </div>
                    </SwiperSlide>
                    <SwiperSlide>
                        <div className="img_div">
                            <img src="http://p1.music.126.net/ZYLJ2oZn74yUz5x8NBGkVA==/109951164331219056.jpg" width="100%" height="100%" alt="推荐" />
                            <div className="mask">
                            </div>
                        </div>
                    </SwiperSlide>
                    <SwiperSlide>
                        <div className="img_div">
                            <img src="http://p1.music.126.net/ZYLJ2oZn74yUz5x8NBGkVA==/109951164331219056.jpg" width="100%" height="100%" alt="推荐" />
                            <div className="mask">
                            </div>
                        </div>
                    </SwiperSlide>
                    <SwiperSlide>
                        <div className="img_div">
                            <img src="http://p1.music.126.net/ZYLJ2oZn74yUz5x8NBGkVA==/109951164331219056.jpg" width="100%" height="100%" alt="推荐" />
                            <div className="mask">
                            </div>
                        </div>
                    </SwiperSlide>
                    <SwiperSlide>
                        <div className="img_div">
                            <img src="http://p1.music.126.net/ZYLJ2oZn74yUz5x8NBGkVA==/109951164331219056.jpg" width="100%" height="100%" alt="推荐" />
                            <div className="mask">
                            </div>
                        </div>
                    </SwiperSlide> */}
                </Swiper>
            </div>
        </div>
    );
}

export default Swipers